<template>
  <div class="h-full">
    <div class="h-12 p-4 border-b-1 border-[#ebebeb] font-medium base-font-85"> 图表配置 </div>
    <div class="p-4" :style="{ height: 'calc(100% - 100px)' }">
      <ScrollContainer class=""
        ><BasicForm @register="registerForm">
          <template #colorPickerSlot="{ model, field }">
            <ColorPicker v-model="model[field]" />
          </template>
          <template #deleteSlot="{ field }">
            <a-button type="link" danger @click="handleDelete(field)">删除</a-button>
          </template>
        </BasicForm></ScrollContainer
      >
    </div>

    <div
      class="h-12.5 p-4 flex justify-end items-center"
      style="box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.1)"
    >
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import ColorPicker from '/@/components/ColorPicker/main.vue';
  import { modalFormStyleSetting } from '/@/settings/thingsBoardDesign';
  import { widgetsChartSchemas } from '/@/views/thingsborad/dashboards/components/ConfigureDashboard/components/modalClassify/controlCard/controlCard.data';
  import { ref, watchEffect, nextTick } from 'vue';

  import { ScrollContainer } from '/@/components/Container';
  const props = defineProps({
    whereFrom: { type: String },
    formData: {
      type: Object,
    },
  });

  const emits = defineEmits(['success']);

  const [
    registerForm,
    { validate, setFieldsValue, appendSchemaByField, removeSchemaByField, resetSchema },
  ] = useForm({
    layout: 'vertical',
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  watchEffect(async () => {
    //此处初始两次 TODO
    await nextTick();
    if (props.whereFrom && props.whereFrom == 'widgetsLibrary') {
      resetSchema(widgetsChartSchemas);
      if (props.formData) {
        setFieldsValue({
          ...props.formData,
        });
      }
    }
  });

  // 添加series项
  // function handleAdd() {
  //   appendSchemaByField(getAddSchemas(seriesLength.value), '');
  //   seriesLength.value += 1;
  // }
  // 删除series项
  function handleDelete(field: string) {
    removeSchemaByField([
      `series.${Number(field)}.key`,
      `series.${Number(field)}.name`,
      `series.${Number(field)}.color`,
      `${Number(field)}`,
    ]);
  }

  async function handleSubmit() {
    // const formData = await validate();
    let obj = await validate();

    const formData = {
      targetDeviceAliases: [],
      showTitle: obj.showTitle,
      backgroundColor: obj.backgroundColor,
      color: obj.color,
      padding: '0px',
      settings: {
        parseGpioStatusFunction: 'return body[pin] === true;',
        gpioStatusChangeRequest: {
          method: 'setGpioStatus',
        },
        requestTimeout: 500,
        switchPanelBackgroundColor: '#b71c1c',
        gpioStatusRequest: {
          method: 'getGpioStatus',
          paramsBody: '{}',
        },
        gpioList: [
          {
            pin: 1,
            label: 'GPIO 1',
            row: 0,
            col: 0,
            _uniqueKey: 0,
          },
          {
            pin: 2,
            label: 'GPIO 2',
            row: 0,
            col: 1,
            _uniqueKey: 1,
          },
          {
            pin: 3,
            label: 'GPIO 3',
            row: 1,
            col: 0,
            _uniqueKey: 2,
          },
        ],
      },
      title: obj.title || '开关控制',
    };

    emits('success', formData);
    // closeModal();
  }
</script>
<style lang="less" scoped>
  :deep(.scrollbar__thumb) {
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }
</style>
